<template>
  <div>
    <!-- 没有默认地址的情况 需要去地址页面去选择/添加完再选择 -->
    <div
      class="orderForm-localtion"
      style="background-color: #fff;padding:15px 15px 10px 15px;"
      v-if="!currentAddress.id"
      @click="handlePri"
    >
      <div class="title" style="height: 66px;">
        <div class="address-top" id="addAddress" @click="addReceiveAddress">添加收货地址</div>
        <div class="arrow-box">
          <div class="arrow"></div>
        </div>
      </div>
      <img src="/static/images/store/order.png" style="width:100%;height:4px;display:block" />
    </div>
    <!-- 订单定位 -->
    <div
      class="orderForm-localtion"
      style="background-color: #fff;padding:15px 15px 10px 15px;"
      v-else
      @click="handlePri"
    >
      <div class="title align-center" style="padding:15px">
        <!-- <div class="address-icon-box">
          <div class="address-icon"></div>
        </div>-->

        <div class="address-top" style="padding:0">
          <div class="name-phone">
            <span>{{currentAddress.fullName}}</span>
            <span>{{currentAddress.phone}}</span>
          </div>
          <div
            class="address-detail"
          >{{currentAddress.province+' '+currentAddress.city+' '+currentAddress.area+' '+currentAddress.address}}</div>
        </div>
        <div class="arrow-box">
          <div class="arrow"></div>
        </div>
      </div>
      <img src="/static/images/store/order.png" style="width:100%;height:4px;display:block" />
    </div>
    <!-- 订单详情内容 -->
    <div class="detail-content">
      <ul>
        <li v-for="(item,index) of order" :key="index" class="product-item">
          <div class="cont-left">
            <img :src="item.skuImg||item.coverImg" class="product-image" />
          </div>
          <div class="cont-right flex">
            <p class="goodsName line_ellipsis">{{item.goodsName}}</p>
            <p style="color:#868991;font-size: 12px">{{item.specNames}}</p>
            <div class="integral flex" style="justify-content:space-between;font-size:14px">
              <span style="color:#F45247">{{item.salesPrice||item.salePrice}}积分</span>
              <span style="color:#868991">× {{item.quantity || item.totalNum}}</span>
            </div>
          </div>
        </li>
      </ul>
      <!-- <ul>
        <li class="oneOrder">
          <div class="cont-left">
            <img :src="orderInfo" class="product-image" />
          </div>
          <div class="cont-right flex">
            <p class="goodsName line_ellipsis">{{orderInfo.goodsName}}</p>
            <p style="color:#868991;font-size: 12px">{{orderInfo.goodsSkuName}}</p>
            <div class="integral flex" style="justify-content:space-between;font-size:14px">
              <span style="color:#F45247">{{orderInfo.salePrice}}积分</span>
              <span style="color:#86899">× {{orderInfo.saleQuantity}}</span>
            </div>
          </div>
        </li>
      </ul>-->
      <!-- 备注 -->
      <div class="order_beizhu">
        <div class="orderForm-num flex" style="align-items:center">
          <span style="color:#081020; font-size:14px;">备注</span>
          <!-- <textarea
            class="flex-1 right"
            placeholder-style="color:#CECFD2; font-size:13px;"
            style="width:100%;padding-left:20px;color: #6b6b6b;"
            v-model="userMsg"
            placeholder="选填，可填写您的要求"
            type="text"
          />-->
          <input
            class="input"
            type="text"
            v-model="userMsg"
            placeholder="选填，可填写您的要求"
            placeholder-style="color:#CECFD2; font-size:13px;"
          />
        </div>
      </div>
    </div>

    <!-- 底部 -->
    <div class="footer flex align-center flex-pack-justify">
      <div class="footer_left">
        <span class="pay">需支付</span>
        <span class="integral">&nbsp;{{allMoney}}积分</span>
        <!-- <span class="integral">&nbsp;{{orderInfo.saleQuantity * orderInfo.salePrice}}积分</span> -->
      </div>
      <div class="footer_right" @click="handlePay">支付</div>
    </div>
  </div>
</template>

<script>
import { addressDefault, commitOrder, info, noOrder } from '@/api/api';
// import {
//   addressDefault,
//   commitOrder,
//   info,
//   noOrder,
//   queryGoddsDetails
// } from '@/api/api';
export default {
  props: {},
  data () {
    return {
      // orderInfo: {},
      value: '', // 备注内容
      userMsg: '',
      currentAddress: {
        fullName: '',
        address: '',
        phone: '',
        def: true,
        province: '',
        city: '',
        area: ''
      },
      order: [
        {
          coverImg: '/static/images/timg.png',
          goodsName: '',
          specNames: '',
          salePrice: '298.00',
          totalNum: 0
        }
      ],
      allMoney: '',
      userInfo: {}
    };
  },
  computed: {},
  created () {},
  mounted () {
    // console.log('this.order:', this.order[0].id);
    // console.log('确认订单this.order:', this.order[0].id);
    console.log(this.$root.$mp.query.id, '来到确认订单');
    // this.queryGoddsDetails(this.$root.$mp.query.id);
  },
  onShow () {
    this.userMsg = '';
    this.addressDefault();
    // let obj = wx.getStorageSync('address');
    // console.log(obj)
    // if (obj) {
    //   this.currentAddress = obj;
    //   wx.setStorageSync('address', '');
    // }

    let info = wx.getStorageSync('info');
    this.order = info;
    // console.log('this.order:', this.order);
    this.order.forEach(item => {
      this.allMoney = item.salesPrice * item.quantity;
    });
    this.info();
  },
  watch: {},
  methods: {
    // // 请求商品详情信息
    // async queryGoddsDetails (id) {
    //   await queryGoddsDetails({ id }).then(res => {
    //     this.orderInfo = res;
    //     console.log(this.orderInfo.coverImg, '确认订单');
    //   });
    // },
    // 点击添加收货地址
    addReceiveAddress () {
      wx.navigateTo({
        url: '/pages/store/children/choiceAddress/main'
      });
    },
    // 获取用户信息，拿里面的积分
    async info () {
      wx.showLoading({
        title: '加载中',
        mask: true
      });
      let data = await info();
      wx.hideLoading();
      if (!data.code) {
        this.userInfo = data;
        console.log('this.userInfo', this.userInfo);
      }
    },
    /**
     * 跳转到支付成功
     */
    handlePay () {
      // console.log('value:', this.userMsg);
      var _this = this;
      if (!this.currentAddress.id) {
        wx.showToast({
          title: '请选择地址',
          icon: 'none',
          duration: 1000,
          mask: true
        });
        return false;
      }
      let payMoney = _this.allMoney;
      if (payMoney <= _this.userInfo.integral) {
        let items = [];

        for (let item of _this.order) {
          let obj = {
            goodsId: item.goodsId,
            goodsSkuNo: item.skuNo,
            saleQuantity: item.quantity
          };
          items.push(obj);
        }
        let params = {
          shippingProvince: _this.currentAddress.province,
          shippingCity: _this.currentAddress.city,
          shippingDistrict: _this.currentAddress.area,
          shippingAddress: _this.currentAddress.address,
          shippingName: _this.currentAddress.fullName,
          shippingMobile: _this.currentAddress.phone,
          userComments: _this.userMsg,
          items
        };
        // 如果用户的积分大于商品的积分正常支付；否则就提示积分不足
        //  <= _this.info.integral
        wx.showModal({
          content: '商品一经销售概不退换，是否确认购买？',
          success: function (res) {
            // console.log('res:', res);
            if (res.confirm) {
              // 是
              // if (payMoney <= _this.info.integral) {
              //   console.log('params:', params);
              _this.commitOrder(params);
              // wx.navigateTo({
              //   url: '/pages/store/children/paySuccess/main'
              // });
              // }
            }
            if (res.cancel) {
              console.log('用户点击取消');
              _this.noOrder(params);
            }
          }
        });
      } else {
        wx.showToast({
          title: '积分不足',
          icon: 'none',
          duration: 2000
        });
      }
    },
    // 取消支付
    async noOrder (params) {
      wx.showLoading({
        title: '加载中',
        mask: true
      });
      let data = await noOrder(params);
      wx.hideLoading();
      console.log('取消订单', data);
      if (!data) {
        wx.navigateTo({
          url: '/pages/PersonalCenter/userChildren/myOrder/myOrder/main'
        });
      }
    },
    /**
     * 跳转到选择地址页面
     */
    handlePri () {
      // this.addressText 有值就需要去选择地址 没值就用默认地址
      if (this.currentAddress.id) {
        wx.navigateTo({
          url: '/pages/store/children/choiceAddress/main?hah=1'
        });
      }
    },
    /** 获取我的默认收货地址 */
    async addressDefault () {
      await addressDefault().then(data => {
        if (!data.code) {
          this.currentAddress = data;
        }
      });
    },
    // 提交订单
    async commitOrder (params) {
      wx.showLoading({
        title: '加载中',
        mask: true
      });
      let data = await commitOrder(params);
      wx.hideLoading();
      console.log('data:', data);
      wx.navigateTo({
        url: `/pages/store/children/paySuccess/main?id=${data}`
      });
    }
  },
  components: {}
};
</script>

<style scoped lang="less">
page {
  background-color: #f7f7f8;
}
// 订单定位
.cont-right {
  height: 100px;
  flex-direction: column;
  justify-content: space-between;
  .goodsName {
    color: #081020;
    font-weight: bold;
    font-size: 14px;
  }
}
.title {
  background-color: #fff;
  position: relative;
  display: flex;
  flex-direction: row;

  box-sizing: border-box;
  box-shadow: 0px 0px 20px 0px rgba(2, 6, 4, 0.06);
  border-radius: 2px;

  .arrow-box {
    height: 100%;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    .arrow {
      width: 7px;
      height: 7px;
      border-bottom: solid #868991 1px;
      border-left: solid #868991 1px;
      transform: rotate(-135deg);
    }
  }

  .address-top {
    flex: 1;
    display: flex;
    height: 100%;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    padding-left: 15px;
    box-sizing: border-box;

    .name-phone {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 16px;
      font-family: PingFangSC;
      font-weight: 700;
      color: rgba(8, 16, 32, 1);
    }
    .address-detail {
      font-size: 14px;
      font-family: PingFangSC;
      font-weight: 400;
      color: rgba(134, 137, 145, 1);
      margin-top: 5px;
    }
  }
}

// 订单详情内容
.detail-content {
  background-color: #fff;
  box-sizing: border-box;
  box-shadow: 0px 0px 20px 0px rgba(2, 6, 4, 0.06);
  border-radius: 2px;
  margin: 0 15px 0;

  .product-item {
    width: 100%;
    // height: 130px;
  }
}

ul {
  box-sizing: border-box;

  & li:last-child {
    border-bottom: none;
  }

  li {
    // border-bottom: 1px solid #f2f3f4;

    padding: 15px;
    box-sizing: border-box;

    .cont-left {
      width: 100px;
      height: 100px;
      background-color: #f7f7f8;
      float: left;
      margin-right: 15px;
      .product-image {
        width: 100px;
        height: 100px;
      }
    }
  }
}

.order_beizhu {
  margin-left: 15px;
  margin-right: 15px;
  box-sizing: border-box;
  background-color: #f7f7f8;
}

.orderForm-num {
  padding: 20px 0 20px 0;
  width: 100%;
  display: flex;
  background-color: #fff;
  border-top: 1px solid #e6e6e6;

  .input {
    flex: 1;
    padding-left: 15px;

    font-size: 13px;
  }
}

// 底部
.footer {
  width: 100%;
  height: 54px;
  padding: 0 15px;
  box-sizing: border-box;
  background-color: #fff;
  border-top: 1px solid #e6e6e6;
  position: fixed;
  bottom: 0;
  left: 0;

  .pay {
    font-size: 11px;
    font-weight: 400;
    color: rgba(2, 6, 4, 1);
  }

  .integral {
    font-size: 17px;
    font-weight: 700;
    color: rgba(244, 82, 71, 1);
  }

  .footer_right {
    background: rgba(24, 119, 152, 1);
    border-radius: 2px;
    width: 118px;
    height: 42px;
    text-align: center;
    line-height: 42px;
    font-size: 15px;
    color: rgba(255, 255, 255, 1);
    font-weight: 700;
  }
}

#addAddress {
  padding-left: 15px;
  box-sizing: border-box;
  font-size: 15px;
  font-weight: 700;
  color: rgba(4, 10, 21, 1);
}
</style>
